/**
* @desc 任务页面
* @author 钱炜亮
* @date 2024-04-21
*/
<template>
  <common-page tab>
		<view class="body">
			<view class="card-wrap margin-top-24" v-for="(item, index) in listData" :key="index" @click="bindGoToInfo(item.deviceId)">
				<view class="flex">
					<text class="font-26" style="color: rgba(78,92,127,0.59);">{{ item.deviceName }}</text>
					<view class="status status-success margin-left-18"></view>
				</view>
				<view class="flex info-wrap">
					<view class="item">
						<view class="txt txt-1">人员</view>
						<view class="val">{{ item.personInfo || '--' }}</view>
					</view>
					<view class="item">
						<view class="txt txt-2">跌倒</view>
						<view class="val">{{ item.fallInfo || '--' }}</view>
					</view>
					<view class="item">
						<view class="txt txt-3">呼吸指数</view>
						<view class="val">{{ item.respiratoryIndex || '--' }}</view>
					</view>
				</view>
				<view class="flex margin-top-30">
					<view class="flex-1 left-wrap">
						<image src="../../static/device_bg.jpg" mode="" style="width: 70rpx;height: 62rpx;"></image>
						<text class="margin-top-10 font-26 color-999">{{ item.respiratoryRate }}</text>
						<text class="margin-top-6 font-30" style="font-weight: bold;">呼吸率</text>
					</view>
					<view class="flex-1 right-wrap">
						<view class="item">
							<view class="txt">当前睡姿</view>
							<view class="val">{{ item.sleepingPosition }}</view>
						</view>
						<view class="item">
							<view class="txt">呼吸暂停时间</view>
							<view class="val">{{ item.apneaTime }}</view>
						</view>
						<view class="item">
							<view class="txt">平均暂停时间</view>
							<view class="val">{{ item.avgApneaTime }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
  </common-page>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			listData: []
		};
	},
	computed: {
		...mapGetters('user', ['companyName','userType'])
	},
	onLoad() {
		if( this.userType == 2 ) {
			uni.setNavigationBarTitle({
				title: this.companyName
			})
		}
		this.getListData();
	},
	methods: {
		async getListData() {
			const [err, result] = await this.$to(uni.$u.http.post('/jeecg-boot/api/v1-public/mini-program-datacenter/index'));
			if (err) return;
			console.log(result);
			this.listData = result;
		},
		/* ====== S 事件区域 ====== */
		// 设备详情
		bindGoToInfo(deviceSn) {
			uni.navigateTo({
				url: `/pages/data/dataInfo?deviceSn=${deviceSn}`
			});
		}
		/* ====== E 事件区域 ====== */
		/* ====== S 通用逻辑 ====== */

		/* ====== E 通用逻辑 ====== */
		/* ====== S 接口定义 ====== */

		/* ====== E 接口定义 ====== */
	}
};
</script>

<style lang="scss" scoped>
.body {
	height: 100%;
	overflow: auto;
}
.card-wrap {
	background-color: #fff;
	border-radius: 30rpx;
	padding: 32rpx 22rpx;
	margin-bottom: 20rpx;
	.info-wrap {
		padding: 18rpx 32rpx;
		background-color: #F3F5F9;
		border-radius: 16rpx;
		margin-top: 30rpx;
		.item {
			flex: 1;
			.txt {
				font-size: 24rpx;
				color: #515355;
				display: flex;
				align-items: center;
				&.txt-1 {
					&:before {
						content: '';
						width: 6rpx;
						height: 22rpx;
						background-color: #547DF7;
						margin-right: 10rpx;
						border-radius: 4rpx;
					}
				}
				&.txt-2 {
					&:before {
						content: '';
						width: 6rpx;
						height: 22rpx;
						background-color: #F19D54;
						margin-right: 10rpx;
						border-radius: 4rpx;
					}
				}
				&.txt-3 {
					&:before {
						content: '';
						width: 6rpx;
						height: 22rpx;
						background-color: #8ACF2F;
						margin-right: 10rpx;
						border-radius: 4rpx;
					}
				}
			}
			.val {
				color: #1E2531;
				font-size: 28rpx;
				font-weight: bold;
				margin-top: 8rpx;
			}
		}
	}
	.status {
		width: 15rpx;
		height: 15rpx;
		border-radius: 50%;
	}
	.status-success {
		background-color: #2DE3C5;
	}
	.status-danger {
		background-color: #F15454;
	}
	.item-txt {
		color: #707070;
		font-size: 30rpx;
	}
	.left-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.right-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.item {
			display: flex;
			align-items: center;
			width: 100%;
			margin-top: 18rpx;
			&:nth-of-type(1) {
				margin-top: 0;
			}
		}
		.txt {
			font-size: 26rpx;
			margin-top: 10rpx;
			color: #9FA2B4;
			width: 200rpx;
		}
		.val {
			font-size: 32rpx;
			color: #1E2531;
			font-weight: bold;
		}
	}
}
</style>
